<template>
  <div>
    <el-container>
  <el-header style="background: linear-gradient(to right, #3498db, #9b59b6); padding: 0; height: auto;">
    <r-header></r-header>
  </el-header>
  <el-container>
    <el-aside :width="isCollapse ? '4rem' : '12.5rem'"  class="left-aside">
       <StudentNav style="height: 700px;" v-on:childByValue="childByValue"></StudentNav>
    </el-aside>
        <el-main style="padding: 0; height: auto;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import StudentNav from "@/components/StudentNav";
import RHeader from "@/components/r-header";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "index",
  components: {RHeader, StudentNav},

data () {
      return {
        isCollapse: 'false'
      }
    },
    methods: {
      childByValue: function (childValue) {
        // childValue就是子组件传过来的值
        this.isCollapse = childValue
      }
    }
  }
</script>

<style scoped >
  .el-main{background-color: blue;}
  .left-aside{
		overflow: visible;
    transition: width 0.4s;
	}
</style>